<template>
<div>
<Goback></Goback>
  <h1 style="text-align:center;font-size:1.2rem">个人中心</h1>
  <div class="my-wrap">
      <div class="myinfo">
      <div class="info-left">
          <!-- <img src="../assets/my/my.jpg" alt="" class="myimg"> -->
          <img :src="mylimg==''?defaultimg:mylimg" alt="" class="myimg">
          <p>{{myname}}</p>
      </div>
      <div class="info-right">
          <button v-if="$store.state.iflogin" @click="cancelLogin()">注销</button>
          <button v-else @click="login()">登陆</button>
      </div>
  </div>
  <ul class="items">
    <li>待付款</li>
    <li>待收货</li>
    <li>售后中</li>
    <li>待评价</li>
    <li>优惠券</li>
    <li>收藏</li>
    <li>预约</li>
    <li>评论</li>
  </ul>
  <ul class="mysth">
    <li>我的订单</li>
    <li>收获信息</li>
    <li>我的售后</li>
    <li>FAQ</li>
  </ul>
  </div>
</div>

</template>
<script>
export default {
  created(){

  },
mounted(){
  // console.log(this.$store.state.iflogin);
  //先判断store里面的数据不是空才更新data数据
  if(this.$store.state.loginmsg!==''){
    this.myname=this.$store.state.loginmsg.uname;
  this.mylimg=this.$store.state.loginmsg.myimg;
  }
  // console.log(this.mylimg);
  // console.log(this.defaultimg)
  // console.log(this.myname)
},
data(){
  return{
      myname:'请登陆',
      defaultimg:require('../assets/weapon/my.png'),
      mylimg:''
  }
},
methods:{
cancelLogin(){
  this.$store.commit('cancelLogin')
  this.$router.go(0);
  // console.log(1)
},
login(){
  this.$router.push('/login')
}
}
}
</script>

<style lang="scss" scoped>
ul{
  list-style-type: none;
}
.my-wrap{
  display: flex;
  flex-direction: column;
  .myinfo{
    display: flex;
    height: 6rem;
    background: red;
    .info-left{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      p{
        color:#fff
      }
    }
    .info-right{
      width:100%;
      position: relative;
      text-align: center;
      line-height: 6rem;
      button{
        // position: absolute;
        background: rgba(206, 57, 57,.3);
        border: 1px solid #fff;
        outline: none;
        border-radius: .7rem;
        padding: .2rem .5rem .2rem .5rem;
      font-size:1rem;
      color: #fff;
      }
    }
  }
}
.items{
  display: flex;
  flex-wrap: wrap;
  padding-left:0;
  li{
    width:25%;
  padding: .8rem;
  box-sizing: border-box;
  font-size: .8rem;
  border: 1px solid #dddddd;
  }
}
.mysth{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  li{
    width:100%;
    padding: 1rem;
    box-sizing: border-box;
    border:1px solid #dddddd
  }
}
.myimg{
  border-radius: 100%;
  width:4rem;
  height:4rem
}
</style>>
